<template>
    <div class="history-hot">
        <div class="his-hot" v-if="isShowHistory">
            <div class="hd">
                <h4>历史记录</h4>
                <van-icon name="delete-o" @click="delClick" />
            </div>
            <div class="bd">
                <van-tag v-for="item,index in historyKeywordList" :key="index" plain type="primary" color="#666" @click="hdTagClick(item)">{{item}}</van-tag>
            </div>
        </div>
        <div class="his-hot">
            <div class="hd">
                <h4>热门搜索</h4>
            </div>
            <div class="bd">
                <van-tag v-for="item,index in hotKeywordList" :key="index" plain type="primary" :color="item.is_hot?'red':'#666'" @click="hdTagClick(item.keyword)">{{item.keyword}}</van-tag>
            </div>
        </div>
    </div>
</template>

<script>
// 请求api相关
import {  clearHistory } from "@/request/searchApi.js";
export default {
    name:'',
    components: {

    },
    props: ['historyKeywordList','hotKeywordList'],
    data() {
        return {
            isShowHistory:true
        };
    },
    methods: {
        hdTagClick(item){
            this.$emit('hdTagClick',item)
        },
        delClick(){
            clearHistory().then(res=>{
               if(res.errno == 0){
                   setTimeout(()=>{
                       this.$toast('删除成功');
                       this.isShowHistory = false
                   },1000)
               } 
            })
        }
    }
};
</script>

<style scoped lang="less">
    .history-hot{
        .his-hot{
            background-color: #fff;
            padding: .1rem;
            margin-bottom: 0.15rem;

            .hd{
                display: flex;
                justify-content: space-between;
                margin-bottom: .05rem;
                font-size: 0.18rem;
            }
            .van-tag{
                margin: .1rem .1rem .1rem 0;
            }
        }
    }
</style>
